<template>
  <div class="box">
    <h2>子组件 add --- {{ count }}</h2>
    从vuex中获取的值:<label> {{ count }} </label>
    <br />
    <!-- 不允许在任何情况下直接操作 state 的数据 -->
    <!-- <button @click="$store.state.count++">值+1</button> -->
    <button @click="add">值+1</button>
    <button @click="asyncAdd">延时1s值+1</button>
    <button @click="$store.dispatch('asyncChangeCount', 100)">延时1s值改成100</button>
    <button @click="asyncChangeCount(10000)">延时1s值改成10000</button>
  </div>
</template>

<script>
// 前置知识: 展开运算符的作用, 可以将对象内的所有成员复制到另一个对象中
// const obj1 = {
//   fn() {}
// }

// const obj2 = {
//   ...obj1
// }

// console.log(obj1, obj2)

// 1. 引入辅助函数
import { mapState, mapActions } from 'vuex'

// const result = mapState(['count'])
// console.log(result)

// const computed = { ...result }

// const computed2 = { ...mapState(['count']) }

export default {
  name: 'AddItem',
  // 2. 在指定的地方调用并展开
  computed: {
    // 计算属性
    // count() {
    //   return this.$store.state.count
    // }
    // 这里就是帮我们简写了计算属性, 所以被称为辅助函数
    ...mapState(['count', 'name'])
  },
  methods: {
    ...mapActions(['asyncChangeCount']),
    add() {
      // 在此处触发 incremCount 方法
      // this.$store.commit(mutatuion 的名字)
      this.$store.commit('incremCount')
    },
    asyncAdd() {
      // this.$store.commit('asyncIncrem')
      // 调用 actions 中的异步方法
      this.$store.dispatch('asyncIncrem')
    }
  }
}
</script>

<style lang="css" scoped>
.box {
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2 {
  margin-top: 10px;
}
</style>